<template>
  <div>
    <div
      class="header padding-24 space-between"
      :class="isSinger || sheetStatus == 3 || isSongSheet ? 'background':'purple'"
    >
      <img
        v-show="isSinger || sheetStatus == 3 || isSongSheet"
        :src="coverImgUrl"
        alt
        class="backgroundImg"
      />
      <!-- 返回箭头的样式设置 -->
      <div class="h-back" v-show="isBack" @click="goBack">
        <img :src="back" alt />
      </div>
      <!-- 没有左边的东西的时候 -->
      <div class="h-back" v-show="isHave"></div>
      <!-- 邮箱 -->
      <div class="email" v-show="isEmail" @click="gotonews">
        <img :src="news" alt />
        <span></span>
      </div>
      <!-- 首页独有的听歌识曲的图标 -->
      <div class="h-left" v-show="isIndex && !isVideo">
        <img :src="microphone" alt />
      </div>
      <!-- 有中间一个title标题的头部样式设置 -->
      <div v-show="title" class="title" :class="{mr:isSinger}">{{title}}</div>
      <!-- 首页独有的大搜索框样式设置 -->
      <div @click="search" v-show="isIndex" class="center search">搜索音乐</div>
      <!-- 中间有三个分类的头部样式设置 -->
      <div
        v-show="isMusic"
        @click="checkType(1)"
        :class="typeStatus == 1 ? 'active':''"
        class="type fs-32"
      >{{txt[0]}}</div>
      <div
        v-show="isMusic"
        @click="checkType(2)"
        :class="typeStatus == 2 ? 'active':''"
        class="type fs-32"
      >{{txt[1]}}</div>
      <div
        v-show="isMusic"
        @click="checkType(3)"
        :class="typeStatus == 3 ? 'active':''"
        class="type fs-32"
      >{{txt[2]}}</div>
      <!-- 中间有两个分类的头部样式 -->
      <div
        v-show="isSea"
        @click="checkType(1)"
        :class="typeStatus == 1 ? 'active':''"
        class="type fs-32"
      >{{txt1[0]}}</div>
      <div
        v-show="isSea"
        @click="checkType(2)"
        :class="typeStatus == 2 ? 'active':''"
        class="type fs-32"
      >{{txt1[1]}}</div>
      <!-- 右边播放按钮的样式设置 -->
      <div class="h-right" v-show="!isSinger && hasData" @click="showPlayer">
        <img v-show="!store.isPlay" :src="play" alt />
        <img v-show="store.isPlay" :src="playing" alt />
      </div>
      <!-- 歌手页面  右边有分享图标的 -->
      <div class="h-right-s" v-show="isSinger">
        <img :src="share" alt @click="shareSinger" />
        <img v-show="!store.isPlay" :src="play" alt @click="showPlayer" />
        <img v-show="store.isPlay" :src="playing" alt @click="showPlayer" />
      </div>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/footer-nav";
export default {
  name: "header-nav",
  data() {
    return {
      store: this.getStore(),
      news: require("../assets/account/news.png"),
      share: require("@/assets/account/share.png"),
      microphone: require("@/assets/index/microphone.png"),
      play: require("@/assets/index/play.png"),
      back: require("@/assets/index/back.png"),
      baseImg: require("@/assets/account/singerbg.png"),
      playing: require("@/assets/public/playing.gif"),
      typeStatus: 1,
      hasData: true,
      txt: ["分类歌单", "歌手", "排行榜"],
      txt1: ["活动详情", "参赛者"],
      txt2: "分类歌单",
      txt3: "分类歌单"
    };
  },
  props: {
    isIndex: Boolean,
    isBack: Boolean,
    isMusic: Boolean,
    title: String,
    isHave: Boolean,
    isEmail: Boolean,
    isSongSheet: Boolean,
    sheetStatus: Number,
    isSinger: Boolean,
    coverImgUrl: String,
    isVideo: Boolean,
    isSea: Boolean,
    status: Number
  },
  components: {},
  methods: {
    // 分享歌手
    shareSinger() {
      this.$emit("shareStatus", true);
    },
    // 头部3标题点击事件
    checkType(num) {
      this.typeStatus = num;
      this.$emit("fn", this.typeStatus);
    },
    // 搜索点击事件
    search() {
      this.$router.push({
        path: "/index/search"
      });
    },
    // 展示播放歌曲详情页
    showPlayer() {
      console.log(window.localStorage.getItem("musicMes"),'--888');
      if (window.localStorage.getItem("musicMes") == null || window.localStorage.getItem("musicMes") == "{}") {
        window.location.href = `https://www.metyou.wang/frontend/index.html#/index/find-music`;
      } else {
        this.store.isFullPlay = true;
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    gotonews() {
      this.$router.push("/news");
    }
  },
  created() {
    var num = window.sessionStorage.getItem("findStatus");
    if (num) {
      this.typeStatus = num;
    }
    this.$forceUpdate();
    //  console.log(this.store.musicMes,'--999');
    if (JSON.stringify(this.store.musicMes) == "{}") {
      //  this.hasData = false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// 清除浮动
.clearFix::after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}
// 头部样式设置
.header {
  // background: linear-gradient(to right, #680dae, #9529c6);
  .background {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .backgroundImg {
    width: 100%;
    height: 100%;
    z-index: -1;
    // margin-left: -1.1rem;
    // margin-top: -1.1rem;
    left: 0;
    top: 0;
    position: absolute;
    filter: blur(0.3rem);
  }
  .center.search {
    width: 5.75rem;
    height: 0.58rem;
    line-height: 0.58rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 0.29rem;
    font-size: 0.32rem;
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
  }
  .center.search::before {
    content: "";
    width: 0.3rem;
    height: 0.3rem;
    background: url("../assets/index/search.png");
    background-size: 0.3rem;
    margin-right: 0.3rem;
  }
  .h-left {
    width: 0.38rem;
    height: 0.49rem;
    img {
      display: inline-block;
      width: 100%;
    }
  }
  .email {
    width: 0.46rem;
    height: 0.38rem;
    position: relative;
    img {
      width: 0.46rem;
      height: 0.38rem;
    }
    span {
      width: 0.13rem;
      height: 0.13rem;
      border-radius: 50%;
      background-color: #f44349;
      position: absolute;
      top: -0.05rem;
      right: -0.05rem;
    }
  }
  .h-back {
    width: 0.15rem;
    height: 0.26rem;
    img {
      width: 100%;
    }
  }
  .title {
    font-size: 0.36rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
  .mr {
    margin-right: -0.3rem;
  }
  .h-right {
    width: 0.38rem;
    height: 0.5rem;
    img {
      display: inline-block;
      width: 100%;
    }
  }
  .h-right-s {
    img {
      display: inline-block;
    }
    img:nth-child(1) {
      width: 0.45rem;
      height: 0.43rem;
      margin-right: 0.4rem;
    }
    img:nth-child(2) {
      width: 0.38rem;
      height: 0.44rem;
    }
    img:nth-child(3) {
      width: 0.38rem;
      height: 0.44rem;
    }
  }
  // 有三个标题的样式设置
  .type {
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
  .type.active {
    font-weight: bold;
    font-size: 0.36rem;
  }
}
// .pink{
//   background: linear-gradient(to right,#C0A0A3,#8F6980);
// }
.purple {
  background: linear-gradient(to right, #680dae, #9529c6);
}
// .singerBgc {
//   background: linear-gradient(to right, #a0c0c7, #b19194, #9ab5bb);
// }
</style>
